<template>
   <div>
      <div style="display: flex;justify-content: space-between">
         <el-button icon="el-icon-plus" type="primary"  @click="showAddSalaryView">添加工资账套</el-button>
         <el-button icon="el-icon-refresh" type="success" @click="initSalaries"></el-button>
      </div>
      <div style="margin-top: 10px">
         <el-table :data="salaries" border stripe>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column width="120" prop="name" label="账套名称"></el-table-column>
            <el-table-column width="70" prop="basicsalary" label="基本工资"></el-table-column>
            <el-table-column width="70" prop="trafficsalary" label="交通补助"></el-table-column>
            <el-table-column width="70" prop="lunchsalary" label="午餐补助"></el-table-column>
            <el-table-column width="70" prop="bonus" label="奖金"></el-table-column>
            <el-table-column width="100" prop="createdate" label="启用时间"></el-table-column>
            <el-table-column label="养老金" align="center">
               <el-table-column width="70" prop="pensionper" label="比率"></el-table-column>
               <el-table-column width="70" prop="pensionbase" label="基数"></el-table-column>
            </el-table-column>
            <el-table-column label="医疗保险" align="center">
               <el-table-column width="70" prop="medicalper" label="比率"></el-table-column>
               <el-table-column width="70" prop="medicalbase" label="基数"></el-table-column>
            </el-table-column>
            <el-table-column label="公积金" align="center">
               <el-table-column width="70" prop="accumulationfundper" label="比率"></el-table-column>
               <el-table-column width="70" prop="accumulationfundbase" label="基数"></el-table-column>
            </el-table-column>
            <el-table-column label="操作">
               <template slot-scope="scope">
                  <el-button @click="showEditSalaryView(scope.row)" >编辑</el-button>
                  <el-button type="danger" @click="deleteSalary(scope.row)">删除</el-button>
               </template>
            </el-table-column>
         </el-table>
      </div>
<!--添加工资账套 弹框事件-->
         <el-dialog
                 :title="dialogTitle"
                 :visible.sync="dialogVisible"
                 width="50%">
                  <div style="display: flex;justify-content: space-around;align-items: center">
                     <!--Steps 步骤条 组建   direction="vertical" 标识的是竖式步骤条   active	设置当前激活步骤  active属性，接受一个Number，表明步骤的 index，从 0 开始-->
                     <el-steps direction="vertical" :active="activeItemIndex">
                        <!--这是循环 数据中定义的显示多少步骤  salaryItemName数据定义的个数  title 步骤的名称   步骤的竖列的名称 -->
                        <el-step :title="itemName" v-for="(itemName,index) in salaryItemName" :key="index"></el-step>
                     </el-steps>
                     <!--中间显示的输入的内容  动态变化显示的内容   -->
                    <!--遍历的是salary对象  三个参数的内容   value : 属性的值  title ：属性的key （可选） index : 索引 （可选）-->
                      <el-input v-model="salary[title]" :placeholder="'请输入'+salaryItemName[index]+'...'"
                               v-for="(value,title,index) in salary"
                               :key="index" v-show="activeItemIndex==index" style="width: 200px"></el-input>
                  </div>
                  <span slot="footer" class="dialog-footer">

             <el-button @click="preStep">{{activeItemIndex==10?'取消':'上一步'}}</el-button>
                     <!--当到第九步的时候显示完成  否则显示下一步-->
             <el-button type="primary" @click="nextStep">{{activeItemIndex==10?'完成':'下一步'}}</el-button>
           </span>
         </el-dialog>

   </div>
</template>

<script>
    export default {
        name: "SalSob",
       data(){
           return{
              salaries:[],   //列表查询后台的数据
              dialogTitle:"", //弹出框的标题
              dialogVisible:false,//弹框显隐的标识
              activeItemIndex: 0,// 激活的项
              salaryItemName: [
                 '基本工资',
                 '交通补助',
                 '午餐补助',
                 '奖金',
                 '养老金比率',
                 '养老金基数',
                 '医疗保险比率',
                 '医疗保险基数',
                 '公积金比率',
                 '公积金基数',
                 '账套名称'
              ],
              salary: {
                 basicsalary: 0,
                 trafficsalary: 0,
                 lunchsalary: 0,
                     bonus: 0,
                 pensionper: 0,
                 pensionbase: 0,
                 medicalper: 0,
                 medicalbase: 0,
                 accumulationfundper: 0,
                 accumulationfundbase: 0,
                     name: ''
          }
           }
    },mounted() {
          this.initSalaries();
       },methods:{
           //修改数据 弹出修改的内容
          showEditSalaryView(data) {
             this.dialogTitle = '修改工资账套';
             this.dialogVisible = true;
             this.salary.basicsalary = data.basicsalary;
             this.salary.trafficsalary = data.trafficsalary;
             this.salary.lunchsalary = data.lunchsalary;
             this.salary.bonus = data.bonus;
             this.salary.pensionper = data.pensionper;
             this.salary.medicalbase = data.medicalbase;
             this.salary.medicalper = data.medicalper;
             this.salary.medicalBase = data.medicalBase;
             this.salary.accumulationfundper = data.accumulationfundper;
             this.salary.accumulationfundbase = data.accumulationfundbase;
             this.salary.name = data.name;
             this.salary.id = data.id;
          },
           //删除操作
          deleteSalary(data) {
             this.$confirm('此操作将删除【' + data.name + '】账套，是否继续？', '提示', {
                cancelButtonText: '取消',
                confirmButtonText: '确定'
             }).then(() => {
                this.deleteRequest("/salary/sob/" + data.id).then(resp => {
                   if (resp) {
                      this.initSalaries();
                   }
                })
             }).catch(() => {
                this.$message.info("取消删除!");
             })
          },
        //上一步触发事件
       preStep() {
          if (this.activeItemIndex == 0) {
             return;
          } else if (this.activeItemIndex == 10) {
             //关闭对话框
             this.dialogVisible = false;
             return;
          }
          this.activeItemIndex--;
       },
       //下一步触发事件
       nextStep() {
          if (this.activeItemIndex == 10) {
             if (this.salary.id) { //修改
                this.putRequest("/salary/sob/", this.salary).then(resp=>{
                   if (resp) {
                      this.initSalaries();
                      this.dialogVisible = false;
                   }
                })
             } else {//新增
                this.postRequest("/salary/sob/", this.salary).then(resp => {
                   if (resp) {
                      this.initSalaries();
                      this.dialogVisible = false;
                   }
                });
             }
             return;
          }
          this.activeItemIndex++;
       },
           //初始化查询列表数据
          initSalaries() {
             this.getRequest("/salary/sob/").then(resp => {
                if (resp) {
                   this.salaries = resp;
                }
             })
          },
          //添加工资账套触发事件
          showAddSalaryView() {
             //数据初始化
             this.salary = {
                basicsalary: 0,
                trafficsalary: 0,
                lunchsalary: 0,
                bonus: 0,
                pensionper: 0,
                pensionbase: 0,
                medicalper: 0,
                medicalbase: 0,
                accumulationfundper: 0,
                accumulationfundbase: 0,
                name: '默认名称'
             }
             this.dialogTitle = '添加工资账套';
             this.activeItemIndex = 0;
             this.dialogVisible = true;
          },

       }
    }
</script>

<style scoped>

</style>